<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Tank War - Mark Liu Blog</title>
    <!-- build:css -->
    <link rel="stylesheet/less" href="less/master.less">
    <script src="bower_components/less/dist/less.js"></script>
    <!-- endbuild -->
</head>
<body>
    <div id="page" class="clearfix">
        <div id="tank-grid"></div>
        <div id="control-panel">
            <h2 id="game-state">Stopped</h2>
            <div class="row score clearfix"><span>Score:&nbsp;</span><strong id="score-num">0</strong></div>
            <div class="row">
                <select id="select-gridRowNum">
                    <option value="31">31</option>
                    <option value="41">41</option>
                    <option value="51" selected="selected">51</option>
                    <option value="61">61</option>
                </select>
                <span>&nbsp;Rows</span>
                <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <select id="select-gridColNum">
                    <option value="31">31</option>
                    <option value="41">41</option>
                    <option value="51" selected="selected">51</option>
                    <option value="61">61</option>
                </select>
                <span>&nbsp;Columns</span>
            </div>
            <div class="row">
                <span>Speed of Bullet&nbsp;</span>
                <select id="select-bullet-speed">
                    <option value="500">1</option>
                    <option value="200">2</option>
                    <option value="100">3</option>
                    <option value="50">4</option>
                    <option value="20" selected="selected">5</option>
                    <option value="10">6</option>
                </select>
                <span>&nbsp;Level</span>
            </div>
            <div class="row">
                <span>Qty of Enemies&nbsp;</span>
                <select id="select-npctank-count">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4" selected="selected">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                </select>
            </div>
            <div class="row">
                <span>Speed of Enemies&nbsp;</span>
                <select id="select-npctank-speed">
                    <option value="3000">1</option>
                    <option value="2000">2</option>
                    <option value="1000">3</option>
                    <option value="500" selected="selected">4</option>
                    <option value="300">5</option>
                    <option value="100">6</option>
                </select>
                <span>&nbsp;Level</span>
            </div>
            <div class="row">
                <span>Recycle Time of Enemies&nbsp;</span>
                <select id="select-npctank-time">
                    <option value="1000">1</option>
                    <option value="2000">2</option>
                    <option value="3000" selected="selected">3</option>
                    <option value="4000">4</option>
                    <option value="5000">5</option>
                </select>
                <span>&nbsp;Seconds</span>
            </div>
            <div class="row">
                <span>How Often does Enemies Fire&nbsp;</span>
                <select id="select-npctank-fire">
                    <option value="0">0</option>
                    <option value="1" selected="selected">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                </select>
                <span>&nbsp;Level</span>
            </div>
            <div class="row buttons clearfix">
                <a id="start-game" class="btn">New</a>
                <a id="pause-game" class="btn disabled">Pause</a>
                <a id="reset-game" class="btn disabled">Reset</a>
            </div>
            <p>Tips: Arrow key to move tank, space key to fire.</p>
            <p>Written by Mark Liu. <a href="http://www.markliublog.com/javascript-tank-game.html" target="_blank">http://www.markliublog.com/</a><br/><a href="https://github.com/markliu2013/tank-war.git" target="_blank">https://github.com/markliu2013/tank-war.git</a></p>
            <p style="color: red;">We suggest to play with Chrome, IE8- not supported</p>
        </div><!-- end control-panel -->
    </div><!-- end page -->
    <script>
        try {document.querySelectorAll('html:nth-child(0)')}
        catch (error) {alert('Your browser is too old, we suggest you the latest Chrome to play!');window.close();}
    </script>
    <!-- build:js -->
    <script src="js/jQuery.js"></script>
    <script src="js/util.js"></script>
    <script src="js/Grid.js"></script>
    <script src="js/Bullet.js"></script>
    <script src="js/Tank.js"></script>
    <script src="js/NPCTank.js"></script>
    <script src="js/MyTank.js"></script>
    <script src="js/TankContainer.js"></script>
    <script src="js/Game.js"></script>
    <!-- endbuild -->
    <script>
        var game = new Game();
        game.init();
    </script>
</body>
</html>
